<template>
  <div class="box">
    <el-tabs v-model="flag" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="1"></el-tab-pane>
      <el-tab-pane label="审查流程" name="2"></el-tab-pane>
    </el-tabs>
    <div class="MainBox1" v-show="flag=='2'">
      <optionList :optionList="optionListData"/>
    </div>
    <div class="mainBox" v-show="flag=='1'"> 
      <div class="basicInfo">
        <div class="basicInfo_title">项目基本信息</div>
        <div class="basicInfo_content">
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div class="basic">
                <strong>项目名称：</strong>
                {{dataInfo.projectName}}
              </div>
            </el-col>
            <el-col :span="8">
              <div class>
                <b>项目级别：</b>
                {{dataInfo.level}}
                <!-- <span v-show="dataInfo.projectLevel=='DISTRICT'">区县级</span>
                <span v-show="dataInfo.projectLevel=='CITY'">市级</span>-->
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>所属区县：</strong>
                {{dataInfo.districtName}}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div>
                <b>乡镇：</b>
                {{dataInfo.townName}}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>行政村：</strong>
                {{dataInfo.villageName}}
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <b>项目编号：</b>
                {{dataInfo.projectNumber}}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div class="basic">
                <strong>红线面积：</strong>
                {{dataInfo.hxmj}}
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <b>减少建设用地面积：</b>
                {{dataInfo.hxmj}}公顷
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>实施规模：</strong>
                {{dataInfo.hxmj}}公顷
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div>
                <b>指标使用类型：</b>
                {{dataInfo.projectIndexName}}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>是否涉及户改：</strong>
                {{dataInfo.isReformName}}
              </div>
            </el-col>
            <el-col :span="8">
               <div>
                <b>项目类型：</b>
                {{dataInfo.projectTypeName}}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div class="basic">
                <strong>是否属于收益权质押项目：</strong>
                {{dataInfo.isBelongProfitPledgeProjectName}}
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <b>是否动用户改周转金：</b>
                {{dataInfo.isChangeUserWorkingCapitalName}}
              </div>
            </el-col>
            
          </el-row>
        </div>
      </div>

      <div class="basicInfo">
        <div class="basicInfo_title">建设信息</div>
        <div class="basicInfo_content">
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div class="basic">
                <strong>预计建设规模：</strong>
                {{dataInfo.hxmj}}公顷
              </div>
            </el-col>
            <el-col :span="8">
              <div class>
                <b>预计新增耕地面积：</b>
                {{dataInfo.yjzjgTotal}}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>预计新增耕地比例：</strong>
                {{dataInfo.yjxzgdbl}}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div>
                <b>预计新增耕地亩均投资：</b>
                {{dataInfo.yjxzgdmjtz}}万元/亩
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>预计建设规模均投资：</strong>
                {{dataInfo.yjjsgmjtz}}万元/亩
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <b>预计建新规模：</b>
                {{dataInfo.hxmj}}公顷
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
               <div class="basic">
                <strong>预计建设开始时间：</strong>
                {{dataInfo.planConstructingStartTime}}
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <b>预计建设结束时间：</b>
                {{dataInfo.planConstructingEndTime}}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>资金来源：</strong>
                <!-- <span v-show="dataInfo.fundSource=='CREDIT_FUND'">信贷资金</span> -->
                {{dataInfo.fundSourceName}}
              </div>
            </el-col>
          </el-row>

          
        </div>
      </div>

      <!-- <div class="basicInfo">
        <div class="basicInfo_title">入库备案要件审查</div>
        <div class="basicInfo_content">
          <div class="basic_row">
              <el-button class="btnUpload">辅助审查</el-button>
          </div>
          
        </div>
      </div>-->

      <div class="basicInfo">
        <div class="basicInfo_title">区县局意见</div>
        <div class="basicInfo_content basicInfo_options">
          <div class="options">
            <p>区县中心审查意见</p>
            <div class="boxItem_content_row_item_noFlex_textarea">
              <el-input
                type="textarea"
                :rows="3"
                readonly
                v-model="quxiancenterValue"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-row class="options_row">
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查人：</p>
                  <div class="options_row_img">
                    <img :src="$https+quxiancenter" alt />
                    <!-- <el-input :disabled="true" v-model="quxiancenter" suffix placeholder="请输入内容"></el-input> -->
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查时间：</p>

                  <el-date-picker
                    v-model="quxiancenterDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                    readonly
                  ></el-date-picker>
                </div>
              </el-col>
              <!-- <el-col :span="8">
                <div class="options_row_title">
                  <p>审查状态：</p>
                  <el-select v-model="quxiancenterStatus" disabled placeholder="请选择">
                    <el-option label="同意" value="APPROVED"></el-option>
                    <el-option label="拒绝" value="REJECTED"></el-option>
                  </el-select>
                </div>
              </el-col> -->
            </el-row>
          </div>
          <div class="options">
            <p>区县局审查意见</p>
            <div class="boxItem_content_row_item_noFlex_textarea">
              <el-input
                type="textarea"
                :rows="3"
                v-model="quxianJuValue"
                :readonly="isReadonly"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-row class="options_row">
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查人：</p>
                  <div class="options_row_img">
                    <img :src="$https+quxianJu" alt />
                    <!-- <el-input :disabled="true" v-model="quxianJu" suffix placeholder="请输入内容"></el-input> -->
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查时间：</p>
                  <el-date-picker
                    v-model="quxianJuDate"
                    type="date"
                    :readonly="isReadonly"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
              <el-col :span="8" v-if="!isReadonly">
                <div class="options_row_title">
                  <p>审查状态：</p>
                  <el-select v-model="quxianJuStatus" placeholder="请选择">
                    <el-option label="同意" value="APPROVED"></el-option>
                    <el-option label="拒绝" value="REJECTED"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="btn" v-if="isQxjBtn">
        <el-button size="medium" type="primary" :loading="isLoading" @click="btnQuxianju">提交</el-button>
        <el-button size="medium">取消</el-button>
      </div>
    </div>

    <el-dialog title="入库备案申请表" :visible.sync="isTableDialog" width="50%">
      <div>
        <iframe
          frameborder="0"
          name="showHere"
          width="100%"
          height="1000"
          scrolling="auto"
          :src="$https+tableInfo.filePath"
        ></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
import {
  selectQuInfo,
  saveDistrictBureauOpinion,
  getQuOpinion,
  getTable
} from "@/api/storageForRecordInfo";
import { getTime } from "@/api/getTime";
import { findById } from "@/api/common";
import optionList from "@/components/optionList";
export default {
  components: {
    optionList
  },
  data() {
    return {
      //测试数据（意见列表）
      optionListData: [{
        timestamp: '2018-04-03 20:46',
        size: 'large',
        color: '#0bbd87'
      }, {
        timestamp: '2018-04-03 20:46',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        timestamp: '2018-04-03 20:46',
        size: 'large'
      }, {
        content: '默认样式的节点',
        timestamp: '2018-04-03 20:46'
      }],
      dataInfo: "",
      quxianJuValue: "", //区县局意见
      quxianJuDate: "", //区县局审查日期
      quxianJu: "",
      quxianJuStatus: "",

      quxiancenterValue: "",
      quxiancenter: "",
      quxiancenterDate: "",
      quxiancenterStatus: "",
      tableInfo: "",
      isTableDialog: false,
      isLoading: false,
      isQxjBtn: false,
      isReadonly: false,
      userIcon: "", //用户签名照
      flag:'1',
    };
  },
  created() {
    this.quxianJuDate = getTime();
    this.getSelect();
    this.getOpinion();
    if (
      localStorage.getItem("router") ==
      "STORING_RECORD_FIRST_AUDIT_SECOND_OPINION"
    ) {
      this.isQxjBtn = true;
      this.isReadonly = false;
      if (localStorage.getItem("menusName") == "QXJ") {
        this.isReadonly = false;
        this.isQxjBtn = true;
      } else {
        this.isReadonly = true;
        this.isQxjBtn = false;
      }
    } else {
      this.isReadonly = true;
      this.isQxjBtn = false;
    }
  },
  methods: {
    //切换选项卡
    handleClick(tab, event){
      console.log(tab, event);
    },
    btnQuxianju() {
      let obj = {
        projectId: localStorage.getItem("projectId"),
        checkOpinion: this.quxianJuValue,
        checkCensorId: localStorage.getItem("userId"),
        checkDate: this.quxianJuDate,
        auditResult: this.quxianJuStatus
      };
      console.log(obj, "obj");
      this.isLoading = true;
      saveDistrictBureauOpinion(obj)
        .then(res => {
          console.log(res);
          if (res.code == 1000) {
            this.isLoading = false;
            this.$message({
              message: "提交成功，请继续下一步操作",
              type: "success"
            });
            let objData = {
              projectId: localStorage.getItem("projectId")
            };
            getTable(objData).then(res => {
              console.log(res, "reeee");
              if (res.code == 1000) {
                this.tableInfo = res.data;
                this.isTableDialog = true;
              }
            });
          }

          this.getOpinion();
        })
        .catch(error => {
          this.isLoading = false;
        });
    },
    //获取用户信息
    userInfo() {
      var data = {
        id: localStorage.getItem("userId")
      };
      findById(data).then(res => {
        console.log(res, "用户信息");
        this.userIcon = res.data.signedPhoto;
      });
    },
    getOpinion() {
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      getQuOpinion(obj).then(res => {
        this.userInfo();
        this.quxiancenterValue = res.data.districtCenterCheckOpinion;
        this.quxiancenter =
          res.data.districtCenterAuditor.signedPhoto != null
            ? res.data.districtCenterAuditor.signedPhoto
            : this.userIcon;
        this.quxiancenterDate = res.data.districtCenterCheckDate;
        this.quxiancenterStatus = res.data.districtCenterAuditResult;

        this.quxianJuValue = res.data.districtBureauCheckOpinion;
        this.quxianJuDate =
          res.data.districtBureauCheckDate != null
            ? res.data.districtBureauCheckDate
            : getTime();
        this.quxianJu =
          res.data.districtBureauAuditor.signedPhoto != null
            ? res.data.districtBureauAuditor.signedPhoto
            : this.userIcon;
        this.quxianJuStatus = res.data.districtBureauAuditResult;
      });
    },
    getSelect() {
      //查询
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      selectQuInfo(obj).then(res => {
        console.log(res, "res");
        this.dataInfo = res.data;
      });
    }
  }
};
</script>

<style lang="scss">
.form .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.box {
  margin: 30px;
  border: 1px solid #efefef;
  border-top: none;
  border-radius: 5px;
  // background: #fff;
  .box_ifram {
    width: 600px;
    height: 400px;
    border: 1px solid black;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -25%;
    margin-top: -10%;
  }

  .basicInfo {
    .basicInfo_title {
      height: 50px;
      background: #f8f8f8;
      padding: 0px 30px;
      line-height: 50px;
      color: #333;
      font-size: 18px;
      font-weight: bold;
      border-top: 1px solid #efefef;
      border-bottom: 1px solid #efefef;
    }

    .basicInfo_content {
      padding: 30px 40px;

      .select_bxo {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        div {
          font-size: 14px;
          color: #444;
        }
        .input {
          width: 200px;
          margin: 0px 20px 0px 10px;
        }
      }
      .el_row {
        margin-bottom: 30px;
        div {
          font-size: 13px;
          color: #606266;
          display: flex;
          align-items: center;
          b {
            color: #444444;
            // width: 160px;
            // display: block;
            // text-align: right;
            // margin-right: 10px;
          }
          strong {
            color: #444444;
            // width: 180px;
            // display: block;
            // text-align: right;
            // margin-right: 10px;
          }
        }
      }
    }

    .basicInfo_content_title {
      display: flex;
      // justify-content: space-between;
    }
    .basicInfo_two {
      .el_row {
        div {
          b {
            width: 150px;
            text-align: right;
            margin-right: 10px;
          }
          strong {
            width: 150px;
            text-align: right;
            margin-right: 10px;
          }
        }
        .basicInput {
          .basicInput_title {
            width: 150px;
          }
          .basicInput_title1 {
            width: 150px;
          }
        }
      }
    }
  }
  .basic_row {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #444;
    font-weight: bold;
    margin-bottom: 25px;
    span {
      margin-right: 20px;
    }
  }
  .basicInfo_options {
    padding: 0px 40px;
    .options {
      font-size: 13px;
      font-weight: bold;
      color: #444;

      .options_row {
        margin-top: 15px;
        display: flex;
        align-items: center;
        .options_row_title {
          display: flex;
          align-items: center;

          .options_row_img img {
            width: 105px;
            height: 59px;
            margin-left: 20px;
          }
        }
      }
    }
  }

  .btn {
    margin-bottom: 20px;
    margin-left: 50px;
  }
}
.boxItem_content_row_item_noFlex_textarea {
  width: 90%;
}
</style>
